<!--
 * @Author: JunyaoPan
 * @Date: 2021-09-16 10:52:43
 * @LastEditors: JunyaoPan
 * @LastEditTime: 2021-10-14 19:43:51
 * @Description: 
-->
<template>
  <div>
    <!-- 头部 -->
    <Header></Header>
    <!-- 内容 -->
    <div class="content">
      <!-- 轮播图 头条广大 -->
      <div class="content1_bg">
        <div class="wrapper">
          <!-- 轮播图 -->
          <div class="content1_left">
            <div>
              <el-carousel height="450px" indicator-position="outside">
                <el-carousel-item
                  v-for="item in categoryElegant"
                  :key="item.id"
                >
                  <div class="content1_left_img">
                    <img :src="item.cover" width="700px" height="370px" />
                  </div>
                  <div class="content1_left_title">
                    <p
                      style="
                        font-size: 16px;
                        font-weight: 800;
                        text-align: center;
                      "
                    >
                      {{ item.title }}
                    </p>
                    <p v-html="item.content" style="margin-top: 3px">
                      {{ item.content }}
                    </p>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
          <!-- 头条广大 -->
          <div class="content1_right">
            <div class="content1_right_title">
              <div class="div1">头条广大</div>
              <div @click="toDetailList(4)">更多></div>
            </div>
            <div class="content1_right_content">
              <ul v-for="item in allCategory" :key="item.id">
                <li
                  @click="toDetailList('', item.id)"
                  v-if="item.categoryId == 4"
                >
                  <!-- 时间 -->
                  <div class="div_time">
                    <img src="http://news.gzhu.edu.cn/images/ico1.png" />
                    {{ item.publishTime | fmtDate }}
                  </div>
                  <!-- 标题 -->
                  <div>{{ item.title }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 校园动态 媒体广大 -->
      <div class="content2_bg">
        <div class="wrapper">
          <!-- 校园动态 -->
          <div class="content2_left">
            <!-- 标题 -->
            <div class="title">
              <span>校园动态</span>
              <span @click="toDetailList(7)">更多></span>
            </div>
            <!-- 内容 -->
            <div class="content">
              <div class="wrapper1">
                <ul
                  v-for="index in allCategory.slice(0, 3)"
                  :key="index.id"
                >
                  <li @click="toDetailList('', index.id)">
                    <img :src="index.cover" />
                    <div>{{ index.title }}</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- 媒体广大 -->
          <div class="content2_right">
            <!-- 标题 -->
            <div class="title">
              <span>媒体广大</span>
              <span @click="toDetailList(6)">更多></span>
            </div>
            <!-- 内容 -->
            <div class="content3_content_ul1">
              <ul v-for="item in allCategory" :key="item.id">
                <li
                  @click="toDetailList('', item.id)"
                  v-if="item.categoryId == 6"
                >
                  <div class="div_title">
                    <img src="http://news.gzhu.edu.cn/images/ico3.png" />
                    {{ item.title }}
                  </div>
                  <div class="div_time">
                    {{ item.publishTime | fmtDate }}
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 视觉广大 广大故事 -->
      <div class="content3_bg">
        <div class="wrapper">
          <!-- 视觉广大 -->
          <div class="content3_left">
            <!-- 标题 -->
            <div class="content3_title">
              <span>视觉广大</span>
              <img src="../assets/bg-content3.png" />
            </div>
            <!-- 内容 -->
            <div class="content3_content">
              <!-- 小标题 -->
              <!-- 视觉广大-->
              <el-tabs type="border-card" :stretch="true" class="el-tabs">
                <el-tab-pane class="el-tab-pane" label="视觉广大">
                  <div class="content3_left_content_ul">
                    <ul v-for="item in allCategory" :key="item.id">
                      <li v-if="item.categoryId == 5" @click="toDetailList('', item.id)">
                        <div>
                          <img :src="item.cover" />
                        </div>
                        <div class="content3_content_ul_li">
                          <p>
                            <img src="../assets/ico1.png" width="5px" alt="" />
                            {{ item.publishTime | fmtDate }}
                          </p>
                          <p class="content3_content_ul_li_p1">
                            {{ item.title }}
                          </p>
                          <p>
                            阅读次数：{{ item.readTimes }} 点赞次数：{{
                              item.thumpUp
                            }}
                          </p>
                        </div>
                      </li>
                    </ul>
                  </div>
                </el-tab-pane>

                <!-- 最美校园-->
                <el-tab-pane class="el-tab-pane" label="最美校园">
                  <div class="content3_left_content_ul">
                    <ul v-for="item in allCategory" :key="item.id">
                      <li v-if="item.categoryId == 10" @click="toDetailList('', item.id)">
                        <div>
                          <img :src="item.cover" />
                        </div>
                        <div class="content3_content_ul_li">
                          <p>
                            <img src="../assets/ico1.png" width="5px" alt="" />
                            {{ item.publishTime | fmtDate }}
                          </p>
                          <p class="content3_content_ul_li_p1">
                            {{ item.title }}
                          </p>
                          <p>
                            阅读次数：{{ item.readTimes }} 点赞次数：{{
                              item.thumpUp
                            }}
                          </p>
                        </div>
                      </li>
                    </ul>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
          <!-- 广大故事 -->
          <div class="content3_right">
            <!-- 标题 -->
            <div class="content3_title">
              <span>广大故事</span>
              <img src="../assets/bg-content3.png" />
            </div>
            <!-- 内容 -->
            <div class="content3_content">
              <el-tabs type="border-card" :stretch="true" class="el-tabs">
                <!-- 名师风采 -->
                <el-tab-pane class="el-tab-pane" label="名师风采">
                  <!-- 第一层 -->
                  <div class="content3_content_ul">
                    <ul v-for="item in allCategory" :key="item.id">
                      <li v-if="item.categoryId == 3" @click="toDetailList('', item.id)">
                        <div>
                          <img :src="item.cover" />
                        </div>
                        <div class="content3_content_ul_li">
                          <p>
                            <img src="../assets/ico1.png" width="5px" alt="" />
                            {{ item.publishTime | fmtDate }}
                          </p>
                          <p class="content3_content_ul_li_p1">
                            {{ item.title }}
                          </p>
                          <p>
                            阅读次数：{{ item.readTimes }} 点赞次数：{{
                              item.thumpUp
                            }}
                          </p>
                        </div>
                      </li>
                    </ul>
                  </div>
                  <!-- 第二层 -->
                  <div class="content3_content_ul1">
                    <ul
                      class="content3_content_ul_title"
                      v-for="item in allCategory"
                      :key="item.id"
                    >
                      <li v-if="item.categoryId == 3" @click="toDetailList('', item.id)">
                        <div class="div_title">
                          <img src="http://news.gzhu.edu.cn/images/ico3.png" />
                          {{ item.title }}
                        </div>
                        <div class="div_time">
                          {{ item.publishTime | fmtDate }}
                        </div>
                      </li>
                    </ul>
                  </div>
                </el-tab-pane>
                <!-- 学子风采 -->
                <el-tab-pane class="el-tab-pane" label="学子风采">
                  <!-- 第一层 -->
                  <div class="content3_content_ul">
                    <ul v-for="item in allCategory" :key="item.id">
                      <li v-if="item.categoryId == 9" @click="toDetailList('', item.id)">
                        <div>
                          <img :src="item.cover" />
                        </div>
                        <div class="content3_content_ul_li">
                          <p>
                            <img src="../assets/ico1.png" width="5px" alt="" />
                            {{ item.publishTime | fmtDate }}
                          </p>
                          <p class="content3_content_ul_li_p1">
                            {{ item.title }}
                          </p>
                          <p>
                            阅读次数：{{ item.readTimes }} 点赞次数：{{
                              item.thumpUp
                            }}
                          </p>
                        </div>
                      </li>
                    </ul>
                  </div>
                  <!-- 第二层 -->
                  <div class="content3_content_ul1">
                    <ul
                      class="content3_content_ul_title"
                      v-for="item in allCategory"
                      :key="item.id"
                    >
                      <li v-if="item.categoryId == 9" @click="toDetailList('', item.id)">
                        <div class="div_title">
                          <img src="http://news.gzhu.edu.cn/images/ico3.png" />
                          {{ item.title }}
                        </div>
                        <div class="div_time">
                          {{ item.publishTime | fmtDate }}
                        </div>
                      </li>
                    </ul>
                  </div>
                </el-tab-pane>
                <!-- 校友风采 -->
                <el-tab-pane class="el-tab-pane" label="校友风采">
                  <!-- 第一层 -->
                  <div class="content3_content_ul">
                    <ul v-for="item in allCategory" :key="item.id">
                      <li v-if="item.categoryId == 8" @click="toDetailList('', item.id)">
                        <div>
                          <img :src="item.cover" />
                        </div>
                        <div class="content3_content_ul_li">
                          <p>
                            <img src="../assets/ico1.png" width="5px" alt="" />
                            {{ item.publishTime | fmtDate }}
                          </p>
                          <p class="content3_content_ul_li_p1">
                            {{ item.title }}
                          </p>
                          <p>
                            阅读次数：{{ item.readTimes }} 点赞次数：{{
                              item.thumpUp
                            }}
                          </p>
                        </div>
                      </li>
                    </ul>
                  </div>
                  <!-- 第二层 -->
                  <div class="content3_content_ul1">
                    <ul
                      class="content3_content_ul_title"
                      v-for="item in allCategory"
                      :key="item.id"
                    >
                      <li v-if="item.categoryId == 8" @click="toDetailList('', item.id)">
                        <div class="div_title">
                          <img src="http://news.gzhu.edu.cn/images/ico3.png" />
                          {{ item.title }}
                        </div>
                        <div class="div_time">
                          {{ item.publishTime | fmtDate }}
                        </div>
                      </li>
                    </ul>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
      </div>
      <!-- 内容底部轮播图 -->
      <div class="content4_bg">
        <div class="wrapper1">
          <ul v-for="index in allCategory.slice(0, 4)" :key="index.id">
            <li @click="toDetailList('', index.id)">
              <img :src="index.cover" />
              <div>{{ index.title }}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import { get } from "../utils/request";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
export default {
  data() {
    return {
      categoryElegant: [],
      // 分页查询所有资讯信息
      allCategory: [],
      categoryId: "",
    };
  },
  methods: {
    toContent(id) {
      this.$router.push({
        path: "/DetailList",
        query: {
          id,
        },
      });
    },
    // 获取头条广大的资讯--媒体聚焦
    async getCategorySix() {
      var res = await get("/index/article/findCategoryArticles");
      this.categoryElegant = res.data[0].aritcle;
    },
    // 分页查询所有新闻资讯
    async getAllCategory() {
      var data = {
        page: 1,
        pageSize: 1000,
      };
      var res = await get("/index/article/pageQuery", data);
      console.log(res.data.list);
      this.allCategory = res.data.list;
    },
    // 分类资讯
    toDetailList(categoryId, id) {
      this.$router.push({
        path: "/DetailList",
        query: { categoryId, id },
      });
    },
  },
  created() {
    this.getCategorySix();
    this.getAllCategory();
  },
  components: {
    Header,
    Footer,
  },
};
</script>
<style lang="scss">
* {
  margin: 0 auto;
  padding: 0;
  font-family: 宋体;
}
.content {
  .content1_bg {
    background-color: rgba(235, 232, 232, 0.548);
    height: 500px;
    .wrapper {
      width: 1100px;
      display: flex;
      justify-content: center;
      align-items: center;
      .content1_left {
        margin-top: 20px;
        width: 700px;
        height: 450px;
        .content1_left_title {
          height: 70px;
          width: 700px;
          font-size: 14px;
          overflow: hidden;
          p {
            width: 700px;
            line-height: 17px;
            -webkit-line-clamp: 3;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
      .content1_right {
        width: 300px;
        height: 450px;
        margin-top: 20px;
        margin-left: 10px;
        background-color: white;
        overflow: hidden;
        .content1_right_title {
          line-height: 60px;
          height: 60px;
          font-size: 23px;
          color: white;
          font-weight: 800;
          background-color: #327513;
          .div1 {
            float: left;
            text-align: center;
            margin-top: 5px;
            width: 150px;
            line-height: 60px;
            background-color: rgb(121, 167, 53);
          }
          div {
            float: right;
            margin-right: 30px;
          }
        }
        .content1_right_content {
          ul {
            font-size: 17px;
            color: rgb(34, 30, 30);
            li {
              width: 88%;
              border-bottom: 1px solid #ddd2d280;
              .div_time {
                margin-top: 10px;
                height: 25px;
                border-bottom: none;
                line-height: 25px;
              }
              div {
                height: 40px;
                border-bottom: 1px solid rgba(224, 221, 221, 0.623);
                line-height: 40px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
              }
              div:last-child {
                border: none;
              }
            }
          }
        }
      }
    }
  }
  .content2_bg {
    height: 350px;
    .wrapper {
      height: 350px;
      width: 1100px;
      display: flex;
      .title {
        height: 50px;
        width: 90%;
        line-height: 50px;
        span {
          font-size: 20px;
          font-weight: 800;
          background: url(../assets/line2.png) no-repeat;
          background-position-y: 45px;
          color: #327513;
        }
        span:first-child {
          float: left;
        }
        span:last-child {
          float: right;
        }
      }
      .content2_left,
      .content2_right {
        height: 320px;
      }
      .content2_left {
        width: 750px;
        .wrapper1 {
          height: 260px;
          width: 750px;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
          flex-direction: row;
          ul {
            li {
              height: 220px;
              width: 240px;
              img {
                width: 240px;
                height: 160px;
              }
              div {
                margin-top: 20px;
                font-size: 17px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
      .content2_right {
        .content3_content_ul1 {
          margin-top: 5px;
          width: 290px;
          height: 260px;
          overflow: hidden;
          li {
            margin-top: 5px;
            height: 32px;
            display: flex;
            div {
              line-height: 32px;
            }
            .div_title {
              width: 70%;
              font-size: 17px;
              padding-left: 5px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .div_time {
              width: 30%;
              font-size: 15px;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .content3_bg {
    width: 100%;
    height: 680px;
    background-color: #f4f4f4;
    .wrapper {
      width: 1100px;
      display: flex;
      align-items: flex-start;
      .content3_left {
        height: 680px;
        width: 450px;
        .content3_left_content_ul {
          overflow: hidden;
          height: 480px;
          ul {
            li {
              height: 110px;
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              font-size: 16px;
              color: black;
              margin-top: 10px;
              background-color: #f4f4f494;
              .content3_content_ul_li {
                width: 230px;
                height: 105px;
                display: flex;
                flex-direction: column;
                align-items: center;
                p {
                  height: 25px;
                  line-height: 25px;
                  width: 220px;
                  text-align: center;
                }
                .content3_content_ul_li_p1 {
                  height: 50px;
                  font-weight: 800;
                  overflow: hidden;
                  text-align: left;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  text-overflow: ellipsis;
                }
                img {
                  width: 12px;
                  height: 12px;
                  margin-right: 2px;
                }
              }
              img {
                width: 180px;
                height: 105px;
              }
            }
          }
        }
      }
      .content3_right {
        height: 600px;
        width: 600px;
        .content3_content_ul {
          overflow: hidden;
          height: 110px;
          ul {
            li {
              height: 110px;
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              font-size: 16px;
              color: black;
              margin-top: 10px;
              background-color: #f4f4f494;
              .content3_content_ul_li {
                width: 290px;
                height: 95px;
                display: flex;
                flex-direction: column;
                align-items: center;
                p {
                  line-height: 25px;
                  width: 280px;
                  text-align: center;
                }
                .content3_content_ul_li_p1 {
                  height: 50px;
                  font-weight: 800;
                  overflow: hidden;
                  text-align: left;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  text-overflow: ellipsis;
                }
                img {
                  width: 12px;
                  height: 12px;
                  margin-right: 2px;
                }
              }
              img {
                width: 190px;
                height: 105px;
              }
            }
          }
        }
        .content3_content_ul1 {
          margin-top: 5px;
          height: 355px;
          .content3_content_ul_title {
            width: 580px;
            li {
              background-color: #f4f4f494;
              margin-top: 5px;
              height: 32px;
              display: flex;
              div {
                line-height: 32px;
              }
              .div_title {
                width: 70%;
                font-size: 18px;
                padding-left: 5px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .div_time {
                width: 30%;
                font-size: 15px;
                text-align: center;
              }
            }
          }
        }
      }
      .content3_title {
        height: 80px;
        line-height: 80px;
        display: flex;
        justify-content: space-between;
        span {
          margin-left: 50px;
          font-size: 22px;
          font-weight: 800;
          color: #327513;
          background: url(../assets/line2.png) no-repeat;
          background-position-y: 65px;
        }
        img {
          width: 80px;
          margin-right: 60px;
        }
      }
      .content3_content {
        .el-tabs {
          height: 550px;
          .el-tabs__nav {
            background-color: #558041;
          }
          .el-tabs__item {
            text-align: center;
            line-height: 50px;
            height: 50px;
            font-size: 20px;
            font-weight: 800;
            color: rgba(255, 255, 255, 0.685);
            background-color: #558041;
          }
          .el-tabs__item.is-active {
            width: 200px;
            height: 50px;
            background-color: #79a735;
            color: white;
          }
          .el-tabs__item:hover {
            color: white;
          }
          .el-tabs__content {
            padding: 10px;
          }
        }
      }
    }
  }
  .content4_bg {
    width: 100%;
    height: 300px;
    background-color: white;
    .wrapper1 {
      height: 300px;
      width: 1100px;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      ul {
        li {
          height: 200px;
          width: 260px;
          img {
            width: 260px;
            height: 160px;
          }
          div {
            margin-top: 10px;
            font-size: 18px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>